<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>添加图书</legend>
</fieldset>
<form class="layui-form" action="" >
  <div class="layui-form-item">
    <label class="layui-form-label">书名</label>
    <div class="layui-input-block">
      <input type="text" name="name" id="name" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" id="alias" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">作者</label>
    <div class="layui-input-block">
      <input type="text" name="author" id="author" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">ISBN</label>
    <div class="layui-input-block">
      <input type="text" name="ISBN" id="ISBN" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">中图号</label>
    <div class="layui-input-block">
      <input type="text" name="classification" id="classification" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">简介</label>
    <div class="layui-input-block">
      <input type="text" name="intro" id="intro" lay-verify="required" style="height:50px;" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出版社</label>
    <div class="layui-input-block">
      <input type="text" name="publishingHouse" id="publishingHouse" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出版年份</label>
    <div class="layui-input-block">
      <input type="text" name="publishDate" id="publishDate" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="add">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
  layui.use(['form'], function (){
    var form = layui.form, $ = layui.jquery;
    form.on('submit(add)', function (data) {
      layer.confirm('<div class="layui-inline">\n' +
              '      <label class="layui-form-label">验证密码</label>\n' +
              '      <div class="layui-input-inline">\n' +
              '        <input type="password" name="pwd" id="pwd" lay-verify="required" autocomplete="off" class="layui-input">\n' +
              '      </div>\n' +
              '    </div>', function (index) {
        data = data.field;
        data['pwd'] = document.getElementById('pwd').value;
        $.ajax({
          url: "/addBook",
          type: "POST",
          data: data,
          success: function (result) {
            if (result.code == 200) {
              layer.msg("添加成功", {
                icon: 6,
                time: 500
              });
            } else {
              layer.msg(result.msg);
            }
          }
        });
        return false;
      });
      return false;
    });
    form.verify({
      password:function (value, item){
        if(!/[0-9a-zA-Z]{6,9}/.test(value)){
          return "密码格式错误";
        }
      },
    })
  })
</script>
</body>
</html>